import React, {Component, Fragment} from 'react'
import {Layout, Row, Col, Divider} from 'antd'
import {Link} from 'react-router-dom'
import '../style/index.scss';
import Helper  from '../helper/index'

const {Footer} = Layout

const {showHtml} = new Helper()
class FootCom extends Component {
    constructor(props){
        super(props)
        this.state= {
            txt:"ICP备案/许可证编号：<a href='http://www.beian.miit.gov.cn'>鄂ICP备18028960号</a>  Technology blog ©2020 Created by GodenFreeman ",
            navs:[
                {
                    tit:"Home",
                    path:"/home",
                },
                {
                    tit:"Rsume",
                    path:"/rsume",
                },
                {
                    tit:"Chat",
                    path:"/chat",
                },
                {
                    tit:"Todo",
                    path:"/todo",
                },
                {
                    tit:"Blog",
                    path:"/blog",
                },
                {
                    tit:"Message",
                    path:"/message",
                }
            ],
           socials:[
                {
                    ico:"fa-git",
                    url:"/home",
                   
                },
                {
                    ico:"fa-github",
                    url:"/chat",
                   
                },
                {
                    ico:"fa-qq",
                    url:"/todo",
                   
                },
                {
                    ico:"fa-linkedin",
                    url:"/blog",
                }
            ]
        }
    }

    render(){
        const {index} = this.props
        return (
            <Fragment>
                <Footer className={index?'':'foot'}>
                    <Row type={'flex'} justify={'center'}>
                        <Col xs={{span:24}} md={{span:16}} >
                            <Row>
                                <Col span={24} style={{textAlign:"center"}}>
                                    <img src={this.props.logo} alt={"logo"} className="foot-logo" />
                                </Col>
                            </Row>
                            <Row type={'flex'} justify={'center'}>
                                {this.state.navs.map((item, index)=>{
                                    return (
                                    <Col xs={{span:4}} md={{span:1}} key={index} style={{textAlign:"center", paddingBottom:10}}>
                                        <Link to={item.path} style={{color:"rgba(0, 0, 0, 0.65)", fontSize:12}}>{item.tit}</Link>
                                    </Col>
                                    )
                                })}
                            </Row>
                        </Col>
                        <Col xs={{span:24}} md={{span:16}} >
                            <Row type={'flex'} justify={'center'}>
                                {this.state.socials.map((item, index)=>{
                                    return (
                                        <Col xs={{span:6}} md={{span:2}} key={index} className='socials' style={{textAlign:"center"}}>
                                            <Link to={item.url} style={{color:"rgba(0, 0, 0, 0.65)"}} >
                                                <i className={`fa ${item.ico} fa-2x`} ></i>
                                            </Link>
                                        </Col>
                                    )
                                })}
                            </Row>
                        </Col>
                    </Row>
                    <Divider />
                    <Row style={{ textAlign: 'center' }}>{showHtml(this.state.txt)}</Row>
                </Footer>
            </Fragment>   
        )
    }
}

export default FootCom
